{% extends "base.html" %}

{% block title %}写信 - 展丞信件箱{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="text-center mb-8">
        <h2 class="text-4xl font-bold text-gray-800 mb-4">
            <i class="fas fa-pen text-green-500"></i>
            写一封信
        </h2>
        <p class="text-gray-600">用文字记录此刻的心情</p>
    </div>

    <div class="bg-white/90 backdrop-blur-sm rounded-xl p-8 shadow-lg">
        <form id="letterForm" class="space-y-6">
            <div>
                <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-heading mr-1"></i>信件标题
                </label>
                <input type="text" id="title" name="title" required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"
                       placeholder="给你的信起个温暖的名字">
            </div>

            <div>
                <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-edit mr-1"></i>信件内容
                </label>
                <textarea id="content" name="content" rows="12" required
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                          placeholder="在这里写下你想说的话..."></textarea>
            </div>

            <div class="flex items-center">
                <input type="checkbox" id="isPublic" name="isPublic" class="mr-2">
                <label for="isPublic" class="text-sm text-gray-700">
                    <i class="fas fa-globe mr-1"></i>设为公开（所有人都能看到）
                </label>
            </div>

            <div class="flex justify-end space-x-4">
                <button type="button" onclick="window.location.href='/'"
                        class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                    取消
                </button>
                <button type="submit"
                        class="btn-primary text-white px-6 py-2 rounded-lg">
                    <i class="fas fa-paper-plane mr-1"></i>发送信件
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('letterForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = {
        title: document.getElementById('title').value,
        content: document.getElementById('content').value,
        is_public: document.getElementById('isPublic').checked
    };
    
    try {
        const response = await fetch('/save_letter', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData)
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert('信件保存成功！');
            window.location.href = '/';
        } else {
            alert('保存失败，请重试');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('网络错误，请重试');
    }
});
</script>
{% endblock %}
